@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

$color:#ff9344;
.web {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    header {
        position: relative;
        top: 0;
        left: 0;
        .logo {
            margin-left: r(23);
            width: r(123);
            height: r(123);
            overflow: hidden;
            a {
                display: block;
                img {
                    width: 100%;
                }
            }
        }
        .search {
            margin-left: r(73);
            margin-top: r(34);
            width: r(268);
            height: r(55);
            border-radius: r(55);
            border: r(3) solid $color;
            position: relative;
            form {
                width: 100%;
                height: 100%;
                position: relative;
            }
            input {
                width: r(184);
                height: r(49);
                padding: 0 r(11) 0 r(5);
                font-size: r(24);
                color: #777777;
                position: absolute;
                left: r(25);
                top: r(0);
                border: none;
                background-color: transparent;
            }
            button {
                width: r(46);
                height: r(49);
                position: absolute;
                top: r(0);
                right: r(13);
                background-color: transparent;
                &::before {
                    content: "";
                    width: r(25);
                    height: r(25);
                    border-radius: 50%;
                    border: r(3) solid $color;
                    position: absolute;
                    top: r(7);
                    left: r(5);
                }
                &::after {
                    content: "";
                    width: r(18);
                    height: r(6);
                    background-color: $color;
                    transform: rotate(45deg);
                    position: absolute;
                    top: r(38);
                    left: r(24);
                }
            }
        }
        .select {
            margin-left:r(83);
            margin-top: r(31);
            width: r(163);
            height: r(60); 
            border: r(3) solid $color;
            position: relative;
            top: 0;
            right: 0;
            &::after {
                content: "";
                width: 0;
                height: 0;
                border-top: r(16) solid $color;
                border-left: r(15) solid transparent;
                border-right: r(15) solid transparent;
                position: absolute;
                right: r(14);
                top: r(25);
            }
            select {
                position: absolute;
                width: 100%;
                height: 100%;
                border: none;
                padding-left: r(14);
                -webkit-appearance: none;
            }
        }
    }
    footer{
        width: 100%;
        position: absolute;
        bottom: 0; 
        left: 0; 
        ul{
            li{
                text-align: center;
                font-size: r(26);
                width: 25%;
                float: left;
                a{  
                    color: black;
                    p{
                        padding-bottom: r(17);
                        padding-top: r(9);
                    }
                    i{
                        color: $color;
                        font-size: r(72);
                    }
                }
            }
        }
    }
}